<template>
  <div class="current-status">
    <el-row type="flex">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="head">
            <span>设备当前状态</span>
             <el-button type="primary" icon="el-icon-refresh-left" circle @click="setAlarm()"></el-button>
          </div>
          <el-col type="flex" :span="5">
            <el-row type="flex">
              <el-col type="flex" :span="8">
                <i v-if="currentGlucosePressure.connectStatus" class="iconfont icon-zaixian" style="color:orange"/>
                <i v-else class="iconfont icon-lixian" />
              </el-col>
              <el-col type="flex" :span="8">
                <div>设备在线状态</div>
                <div>
                  
                  <span v-if="currentGlucosePressure.connectStatus" style="font-size:30px;color:green">在线</span>
                <span v-else style="font-size:30px;color:#333">离线</span>
                </div>
                
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">最近上线时间</div>
              <div>
                <span>{{currentGlucosePressure.lastOnlineDate}}</span>
              </div>
            </el-row>
          </el-col>
          <el-col type="flex" :span="5">
            <el-row type="flex">
              <el-col type="flex" :span="8">
                <i v-if="!currentGlucosePressure.alarmGlucose" class="iconfont icon-anquanzhongxin" style="color:rgb(0, 255, 191)" />

                <i v-else class="iconfont icon-baojingchuli" style="color:red"/>
                
              </el-col>
              <el-col type="flex" :span="8">
                <div>血糖报警状态</div>
                <div>
                  
                  <span v-if="currentGlucosePressure.alarmGlucose" style="font-size:30px;color:red">警告</span>
                <span v-else style="font-size:30px;color:skyblue">未报警</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">血糖最近报警时间</div>
              <div>
                <span>{{currentGlucosePressure.lastGlucoseAlarm}}</span>
              </div>
            </el-row>
          </el-col>
           <el-col type="flex" :span="5">
            <el-row type="flex">
              <el-col type="flex" :span="8">
                <i v-if="!currentGlucosePressure.alarmPresure" class="iconfont icon-anquanzhongxin" style="color:rgb(0, 255, 191)" />

                <i v-else class="iconfont icon-baojingchuli" style="color:red"/>
                
              </el-col>
              <el-col type="flex" :span="8">
                <div>血压报警状态</div>
                <div>
                  
                  <span v-if="currentGlucosePressure.alarmPresure" style="font-size:30px;color:red">警告</span>
                <span v-else style="font-size:30px;color:skyblue">未报警</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">血压最近报警时间</div>
              <div>
                <span>{{currentGlucosePressure.lastPresureAlarm}}</span>
              </div>
            </el-row>
          </el-col>
          <el-col type="flex" :span="4">
            <el-row type="flex">
              <el-col type="flex" :span="8">
                <i class="iconfont icon-xietang" style="color:skyblue"/>
              </el-col>
              <el-col type="flex" :span="8">
                <div>实时血糖</div>
                <div>
                  <span style="font-size:30px;">{{currentGlucosePressure.currentGlucose}}mmol/L</span>
                </div>
              </el-col>
            </el-row>
            
          </el-col>

          <el-col type="flex" :span="5">
            <el-row type="flex">
              <el-col type="flex" :span="8">
                <i class="iconfont icon-gaoxieya" style="color:rgb(187, 113, 255)"/>
              </el-col>
              <el-col :span="8">
                <div>实时血压</div>
                <div>
                  <span style="font-size:30px;">{{currentGlucosePressure.currentPresure}}/{{currentGlucosePressure.currentDiastolicPressure}}mmHg</span>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props:[""],
  data(){
    return{
      currentGlucosePressure:{},
    }
  },
  mounted(){
    
  },
  created(){
    this.getCurrentGlucosePressure()
  },
  methods: {
    getCurrentGlucosePressure(){
        this.axios.get("/glucosePresure/list").then(
            response=>{
                this.currentGlucosePressure=response.data[0]
                console.log('currentGlucosePressure',response.data[0])
            },error=>{
                console.log('currentGlucosePressure',error.msg)
            }
        )
      },
    setAlarm(){
      this.axios.post('/glucosePresure/reboot',{
        deviceName:this.currentGlucosePressure.deviceName,
        currentGlucose:Math.floor(Math.random()*15),
        currentPresure:Math.floor(Math.random()*(200)),
        currentDiastolicPressure:Math.floor(Math.random()*(100)),
      }).then(
           response=>{ 
                  console.log(response)
                  this.getCurrentGlucosePressure()
                  //  this.$parent.getGlucosePressure()
              },
              error=>{
                  console.log(error)
              }
      )
      }
    }
};
</script>

<style scoped>
.current-status {
  padding: 20px;
}
.head {
  display: flex;
  justify-content: space-between;
}
.iconfont {
  font-size: 80px;
}
.iconzaixianmianliuliang {
  color: orange;
}
.iconalarm-full {
  color: red;
}
.iconwendu {
  color: blue;
}
.iconshidu {
  color: greenyellow;
}
.status {
  font-size: 40px;
  font-weight: 800;
  margin-top: 10px;
}
.tip {
  margin-top: 10px;
}
.tip-date {
  margin-top: 5px;
  margin-bottom: 10px;
}
.a{
  background-color: rgb(187, 113, 255);
}
</style>